<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!</title>

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>

	<div id="app" class="container mt-3">


		<form id="form-query" class="form-inline" action="xxx">

			<div class="input-group my-2 mr-2">
				<div class="input-group-prepend">
					<span class="input-group-text">工号</span>
				</div>
				<input type="text" class="form-control" v-model="query.e_id">
			</div>



			<div class="input-group my-2 mr-2">
				<div class="input-group-prepend">
					<span class="input-group-text">入职日期</span>
				</div>
				<input type="date" class="form-control" v-model="query.e_date_start">
				<div class="input-group-prepend input-group-append">
					<span class="input-group-text">至</span>
				</div>
				<input type="date" class="form-control" v-model="query.e_date_end">
			</div>

			<div class="input-group my-2 mr-2">
				<div class="input-group-prepend">
					<span class="input-group-text">姓名</span>
				</div>
				<input type="text" class="form-control" v-model="query.e_name">
			</div>

			<div class="input-group my-2 mr-2">
				<div class="input-group-prepend">
					<span class="input-group-text">工资</span>
				</div>
				<input type="number" class="form-control"
					v-model="query.e_sal_start">
				<div class="input-group-prepend input-group-append">
					<span class="input-group-text">至</span>
				</div>
				<input type="number" class="form-control" v-model="query.e_sal_end">
			</div>

			<div class="input-group my-2 mr-2">
				<button id="bn-query" class="btn btn-primary"
					@click.prevent="getPage(1)">
					<i class="fa fa-search"></i> 查询
				</button>
			</div>

		</form>

		<div class="btn-group mb-2">
			<button id="bn-add" type="button" class="btn btn-primary"
				@click.prevent="openAddWin">
				<i class="fa fa-plus"></i> 增加
			</button>
			<button id="bn-delete-multi" type="button" class="btn btn-danger" @click="execMultiDel" >
				<i class="fa fa-trash-o"></i> 删除
			</button>
		</div>

		{{delIds}}
		
		<table class="table">
			<thead>
				<tr>
					<th><input type="checkbox" v-model="allChecked"/>  {{allChecked}}  </th>
					<th>工号</th>
					<th>姓名</th>
					<th>入职日期</th>
					<th>工资</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="emp in page.rows">
					<td><input type="checkbox" v-model="delIds" :value="emp.e_id" /></td>
					<td>{{emp.e_id}}</td>
					<td>{{emp.e_name}}</td>
					<td>{{emp.e_date_str}}</td>
					<td>{{emp.e_sal}}</td>
					<td><a href="#" class="btn btn-primary btn-sm" @click.prevent="openUpdateWin(emp)" >修改</a> <a
						href="#" class="btn btn-danger btn-sm" @click.prevent="execDel(emp.e_id)" >删除</a></td>
				</tr>
			</tbody>
		</table>

		<nav class="d-flex flex-row justify-content-between">
			<ul class="pagination pagination-sm">
				
				<li class="page-item">
					<div class="input-group input-group-sm">
						<div class="input-group-prepend">
						  <span class="input-group-text" >每页</span>
						</div>
						<select class="form-control form-control-sm" v-model="query.pageSize" @change="onPageSizeChange">
							<option v-for="n in pageList" :value="n">{{n}}&nbsp;条记录</option>
						</select>
						
					</div>
				</li>
				<li class="page-item"><a class="page-link" href="#"
					@click.prevent="getPage(1)">首页</a></li>
				<li class="page-item"><a class="page-link" href="#"
					@click.prevent="getPage(page.curr-1)">上页</a></li>
					
					
				<li class="page-item"><a class="page-link" href="#"
					@click.prevent="getPage(page.curr+1)">下页</a></li>
				<li class="page-item"><a class="page-link" href="#"
					@click.prevent="getPage(page.pgTotal)">尾页</a></li>

				<li class="page-item">
					<div class="input-group input-group-sm">
					  <div class="input-group-prepend">
					    <span class="input-group-text" >当前第</span>
					  </div>
					  <input class="form-control form-control-sm" style="width:50px;text-align:center;"  v-model="query.pageNumber"  @change="getPage(query.pageNumber);" />
					  <div class="input-group-append">
					    <span class="input-group-text" >页</span>
					  </div>
					</div>
				</li>
				

			</ul>
			
			<div style="line-height: 30px; font-size: 14px;">
					&nbsp;当前第{{page.curr}}页{{page.currSize}}条记录，共{{page.pgTotal}}页{{page.total}}条记录
			</div>
		</nav>




		<!-- 新增窗口 -->
		<div id="win-add" style="display: none; padding: 15px;">

			<form>
				<div class="form-group">
					<label>姓名</label> <input type="text" class="form-control"
						v-model="addemp.e_name">
				</div>
				<div class="form-group">
					<label>入职日期</label> <input type="date" class="form-control"
						v-model="addemp.e_date">
				</div>
				<div class="form-group">
					<label>工资</label> <input type="number" class="form-control"
						v-model="addemp.e_sal">
				</div>

				<button id="bn-doadd" type="submit" class="btn btn-primary"
					@click.prevent="execAdd">提交</button>
			</form>

		</div>
		
		<!-- 修改窗口 -->
		<div id="win-upd" style="display: none; padding: 15px;">

			<form>
				<div class="form-group" >
					<label>工号</label> <input type="text" class="form-control"
						v-model="updemp.e_id" readonly="readonly">
				</div>
				<div class="form-group">
					<label>姓名</label> <input type="text" class="form-control"
						v-model="updemp.e_name" >
				</div>
				<div class="form-group">
					<label>入职日期</label> <input type="date" class="form-control"
						v-model="updemp.e_date" >
				</div>
				<div class="form-group">
					<label>工资</label> <input type="number" class="form-control"
						v-model="updemp.e_sal" >
				</div>
	
				<button id="bn-doupd" type="submit" class="btn btn-primary" @click.prevent="execUpd" >提交</button>
			</form>
	
		</div>
		
		

	</div>



	<script src="js/axios.min.js"></script>
	<script src="js/vue.min.js"></script>
	<script src="js/jquery-3.3.1.slim.min.js"></script>
	<script src="js/popper.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="layer/layer.js"></script>
	<script src="js/my.js"></script>


	<script type="text/javascript">
	
	
	
	//打开修改窗口
	const openUpdateWin = function(emp){
		
		this.updemp=myutils.copyProps(emp);
		this.updemp.e_date=emp.e_date_str;
		
		this.winUpdIdx = layer.open({
			  type: 1, 
			  area: ['700px', '540px'],
			  content: $('#win-upd')
			});
		
	};
	
	//执行修改
	const execUpd=function(){
		
		
		let loadIdx = layer.load();// 加载提示
		
		this.$axios.put('/emp',this.updemp)
			.then(function(resp){
				
				layer.close(loadIdx);
				
				let result = resp.data;
				if(result.success){
					vm.getPage(vm.page.curr);
					layer.close(vm.winUpdIdx);// 关闭增加窗口
					layer.msg(result.message,{icon: 6,time: 1500}); 
				}else{
					layer.alert(result.message, {icon: 5});
				}
			})
			.catch((error)=>{
				console.log(error);
				layer.close(loadIdx);
				layer.alert(`服务器错误。错误代码：${error.response.status}` , {icon: 5});// es6新特性：模版字符串
			});
		
	};
	
	//执行删除
	const execDel=function(eid){
		
		
		let loadIdx = layer.load();// 加载提示
		
		this.$axios.delete(`/emp/${eid}`)
			.then(function(resp){
				
				layer.close(loadIdx);
				
				let result = resp.data;
				if(result.success){
					vm.getPage(vm.page.curr);					
					layer.msg(result.message,{icon: 6,time: 1500}); 
				}else{
					layer.alert(result.message, {icon: 5});
				}
			})
			.catch((error)=>{
				console.log(error);
				layer.close(loadIdx);
				layer.alert(`服务器错误。错误代码：${error.response.status}` , {icon: 5});// es6新特性：模版字符串
			});
		
	};
	
	//执行多删除
	const execMultiDel=function(){
		
		
		let loadIdx = layer.load();// 加载提示
		
		this.$axios.delete('/emp',{data:this.delIds})
			.then(function(resp){
				
				layer.close(loadIdx);
				
				let result = resp.data;
				if(result.success){
					vm.getPage(vm.page.curr);					
					layer.msg(result.message,{icon: 6,time: 1500}); 
				}else{
					layer.alert(result.message, {icon: 5});
				}
			})
			.catch((error)=>{
				console.log(error);
				layer.close(loadIdx);
				layer.alert(`服务器错误。错误代码：${error.response.status}` , {icon: 5});// es6新特性：模版字符串
			});
		
	};
	
	
	let vm = new Vue({
		el:'#app',
		data:{
			//查询条件
			query:{
				pageNumber:1,
				pageSize:3
			},
			//当前页面数据
			page:{},
			
			pageList:[3,5,8,10,20],
			
			//新增
			addemp:{},
			winAddIdx:null,
			
			//修改
			updemp:{},
			winUpdIdx:null,
			
			//多删
			delIds:[],
			
			//全选控制
			allChecked:false
			
			
			
		},
		methods:{
			
			onPageSizeChange(){
				this.getPage(1);
			},
			
			getPage(pageNumber){
				
				this.query.pageNumber=pageNumber;
				console.log(this.query);
				this.$axios.get('/emp', {
				    params: this.query
				  })
				  .then((response) => {
					this.allChecked=false;
				    this.page=response.data;
				    
				    //以服务器的数据修正query对象中的页码和每页记录数
				    this.query.pageNumber=this.page.curr;
				    this.query.pageSize=this.page.pageSize;
				    
				  })
				  .catch(function (error) {
				    console.log(error);
				  });
				
			},
			
			//打开增加窗口
			openAddWin(){
				
				this.addemp={};// 重置表单
				this.winAddIdx = layer.open({
					  type: 1, 
					  area: ['700px', '540px'],
					  content: $('#win-add')
					});
				
			},
			
			//执行增加
			execAdd(){
				
				let loadIdx = layer.load();// 加载提示
				
				
				
				this.$axios.post('/emp',this.addemp)
					 .then((resp)=>{
						layer.close(loadIdx);
						const result = resp.data;
						if(result.success){
							this.getPage(this.page.pgTotal+1);//刷新数据
							layer.close(this.winAddIdx);// 关闭增加窗口
							layer.msg(result.message,{icon: 6,time: 1500}); 
						}else{
							layer.alert(result.message, {icon: 5});
						}
					 })
					 .catch((error)=>{
						console.log(error);
						layer.close(loadIdx);
						layer.alert(`服务器错误。错误代码：${error.response.status}` , {icon: 5});// es6新特性：模版字符串
					 });
				
			},
			
			//打开修改窗口
			openUpdateWin,
			//执行修改
			execUpd,
			
			//执行删除
			execDel,
			
			//执行多删除
			execMultiDel
		},
		mounted(){
			this.getPage(1);
		},
		
		watch:{//侦听属性变换
			
			allChecked(newValue,oldValue){
			
				console.log(`${oldValue}->${newValue}`);
				
				if(newValue){
					let arr =[];
					for(let emp of this.page.rows){
						arr.push(emp.e_id);
					}
					
					this.delIds=arr;
				}else{
					this.delIds=[];
				}
				
				
			},
			
			delIds(value){
				
			}
			
		}
	});
	
	
	
	
	
	
	
	
	</script>

</body>
</html>



